<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
	<meta charset="utf-8">
	<title></title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" th:href="@{/js/layui-v2.4.5/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
	<link rel="stylesheet" th:href="@{/js/public/treetable/treeGrid.css}">
</head>
<body class="childrenBody"   style="-webkit-backface-visibility: hidden;">
<form class="layui-form">
	<blockquote class="layui-elem-quote quoteBox">
		<form class="layui-form">
			<div class="layui-inline">
				<div class="layui-input-inline">
					<input type="text" class="layui-input searchVal" placeholder="菜单名"  name = "name"  />
				</div>
				<a class="layui-btn search_btn" lay-submit data-type="reload" lay-filter="query" sec:authorize = "hasAuthority('ROLE_BTN_sys:resource:query')">搜索</a>
			</div>
			<div class="layui-inline">
				<a class="layui-btn layui-btn-normal lay-submit  addNews_btn" id ="addMenu" lay-filter="addMenu" sec:authorize = "hasRole('ROLE_BTN_sys:resource:add')" >添加菜单</a>
			</div>

		</form>
	</blockquote>
	<table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>

	<!--操作-->
	<script type="text/html" id="newsListBar">
		{{#  if(d.type!=2){ }}

			<a class="layui-btn layui-btn-normal	layui-btn-xs " 	 lay-event="add" sec:authorize = "hasRole('ROLE_BTN_sys:resource:add')">新增</a>
		{{#  }else{ }}
	 		<a class="layui-btn layui-btn-normal layui-btn-xs layui-disabled layui-btn-disabled" sec:authorize = "hasRole('ROLE_BTN_sys:resource:add')">新增</a>
		{{#  } }}
		<a class="layui-btn layui-btn-xs" lay-event="edit" sec:authorize = "hasRole('ROLE_BTN_sys:resource:update')" >编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" sec:authorize = "hasRole('ROLE_BTN_sys:resource:del')">删除</a>
	</script>
</form>
<script th:src="@{/js/jquery-2.1.1.min.js}"></script>
<script th:src="@{/js/layui-v2.4.5/layui/layui.js}"></script>
<script th:src="@{/js/utils.js}"></script>
<style>
	.layui-table-view .layui-table {
		position: relative;
		width: 100%;
		margin: 0;
	}
</style>
<script th:inline="javascript">



    var hasSave;
    layui.config({
        base: path+'/js/public/treetable/'
    }).extend({
        treeGrid: 'treeGrid'
    });
	layui.use(['table','form','treeGrid'], function(){
	var table = layui.table,
        treeGrid = layui.treeGrid,
        form = layui.form;

	var ptable=treeGrid.render({
            id:"treeTable"
            ,elem: "#treeTable"
            ,idField:'id'
            ,url:path+'/resource/resourceList'
            ,cellMinWidth: 50
            ,treeId:'id'//树形id字段名称
            ,treeUpId:'parentId'//树形父id字段名称
            ,treeShowName:'label'//以树形式显示的字段
			,heightRemove:[".dHead",105]//不计算的高度,表格设定的是固定高度，此项不生效
			,height:'100%'
			,isFilter:false
			,iconOpen:true //是否显示图标【默认显示】
			,isOpenDefault:false//节点默认是展开还是折叠【默认展开】
			,loading:true
			,method:'post'
			,isPage:false
		    ,cols: [ [

			{field:'label',width:200, title: '菜单名'}
			,{field:'id',width:60, title: 'id'}
			,{field:'css', width:100,title: '图标'
				,templet: function(d){
				return "<i class='layui-icon "+d.css+"'></i> "
       		 }}
			,{field:'uri', width:200,title: 'uri'}

            ,{field:'priority', width:100,title: '优先权'}
//            ,{field:'enabled', width:100,title: '是否有效',templet: function(d){
//                if(d.enabled)
//                	return "是"
//				else
//                    return "否"
//            }}
            ,{field:'btnPermission', width:200,title: '按钮权限'}
            ,{width:200,title: '操作', align:'center', toolbar: '#newsListBar'
//                ,templet: function(d){
//                var html='';
//                var editBtn= "<a class=\"layui-btn layui-btn-xs\" lay-event=\"edit\" sec:authorize = \"hasRole('ROLE_BTN_sys:resource:update')\" >编辑</a>"
//                    var addBtn ="";
//				if(d.type!=2) {
//					 addBtn = '<a class="layui-btn layui-btn-normal	layui-btn-xs " 	 lay-event="add" sec:authorize = "hasRole(\'ROLE_BTN_sys:resource:add\')">新增</a>';
//				}else{
//                    addBtn = '<a class="layui-btn layui-btn-normal layui-btn-xs layui-disabled layui-btn-disabled" sec:authorize = "hasRole(\'ROLE_BTN_sys:resource:add\')">新增</a>';
//				}
//                var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" sec:authorize = "hasRole(\'ROLE_BTN_sys:resource:del\')">删除</a>';
//                return addBtn+editBtn+delBtn;
//            }
            }
        ]]
        });

        //监听操作工具栏

        treeGrid.on('tool(treeTable)',function (obj) {

            var rowData = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            var tr = obj.tr; //获得当前行 tr 的DOM对象
            switch (layEvent){
                case 'add':
                    addOrUpdateMenu(false,rowData);
                    break;
                case 'edit':
                    addOrUpdateMenu(true,rowData);
                    break;
                case 'del':
                    del(obj)
                    break;
                default:
                    layer.alert("未知的操作类型",{icon: 5});
            }
        });

        /**
         * 监听查询按钮
         *
         */
//        $("#addMenu").on('onclick',function () {
//            addOrUpdateMenu(false,null);
//
//        })




        var addOrUpdateMenu = function(edit,obj){
            console.log(obj)
            hasSave = false;
            var url = "";
            if(edit)
                url = path+"/resource/updatePage?id="+obj.id;
            else {
                if(obj==null) {
                    url = path + "/resource/addPage";
                }else{
                    url = path + "/resource/addPage?parentId="+obj.id+"&parentName="+obj.label;
				}
            }
            var index = layui.layer.open({
                title : "添加菜单",
                type : 2,
                content : url,
                success : function(layero, index){
                    var body = layui.layer.getChildFrame('body', index);
                    setTimeout(function(){
                        layui.layer.tips('点此返回菜单列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3
                        });
                    },500)
                },
                end:function(){
                    console.log("开始加载"+hasSave)
                    if(hasSave) {

                        treeGrid.reload("treeTable",{
                            page:{
                                curr:1
                            }
                        });
                    }
                }
            })
            layui.layer.full(index);
            //改变窗口大小时，重置弹窗的宽高，防止超出可视区域（如F12调出debug的操作）
            $(window).on("resize",function(){
                layui.layer.full(index);
            })
        }





        /**
         * 监听查询按钮
         *
         */
        form.on('submit(query)', function(data){
            treeGrid.reload("treeTable",{
                where:data.field,
                page:{
                    curr:1
                }
            });

        });

        //绑定
        $("#addMenu").click(function(){
            addOrUpdateMenu(false,null);
        })
//
//        form.on('submit(addMenu)', function(data){
//            addOrUpdateMenu(false,null);
//
//        });


        /**
		 * 删除
         * @param obj
         */
        function del(obj) {
            console.log(obj);
            layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title:'提示'},
                function(index){//确定回调
					 $.ajax({
						type : 'delete',
                        url : path+'/resource/delete/' + obj.data.id,
                        success : function(data) {
                            obj.del();
                            layer.close(index);
                   		 }
               		 });
                },function (index) {//取消回调
                    layer.close(index);
                }
            );
        }



    });
</script>
</body>
</html>